<template>
  <h4>商品管理</h4>
  <MyTable :goodsList="goodsList">
    <template v-slot:header>
      <th name="header">#</th>
      <th scope="">商品名称</th>
      <th scope="" col>商品价格</th>
      <th scope="" col>商品标签</th>
      <th scope="" col>操作</th>
    </template>

    <template #body="{ row, index }">
      <td>{{ index + 1 }}</td>
      <td>{{ row.goods_name }}</td>
      <td>￥{{ row.goods_prices }}</td>
      <td>
        <input
          type="text"
          v-if="row.inputVisible"
          class="form-control form-control-sm ipt-tag"
          v-focus
          v-model="row.inputValue"
          @blur="onInputConfig(row)"
          @keyup.enter="onInputConfig(row)"
          @keyup.esc="row.inputValue = ''"
        />
        <button
          class="btn btn-outline-primary rounded-pill"
          v-else
          @click="row.inputVisible = true"
        >
          +tag
        </button>
        <span
          class="btn btn-outline-dark"
          v-for="item in row.tags"
          :key="item"
          >{{ item }}</span
        >
      </td>
      <td>
        <button
          type="button"
          class="btn btn-outline-danger btn-sm"
          @click="onRemove(row.id)"
        >
          删除
        </button>
      </td>
    </template>
  </MyTable>
</template>
<script setup>
import { ref } from "vue";
import MyTable from "./components/MyTable.vue";
const goodsList = ref([
  {
    id: 1,
    goods_name: "夏季专柜同款女鞋",
    goods_prices: 298,
    tags: ["舒适", "透气"],
    inputVisible: false,
    inputValue: "",
  },
  {
    id: 2,
    goods_name: "冬季保暖女鞋",
    goods_prices: 208,
    tags: ["保暖", "防滑"],
    inputVisible: false,
    inputValue: "",
  },
  {
    id: 3,
    goods_name: "毛衣",
    goods_prices: 398,
    tags: ["秋冬", "毛衣"],
    inputVisible: false,
    inputValue: "",
  },
  {
    id: 4,
    goods_name: "上衣",
    goods_prices: 198,
    tags: ["雪纺衫", "打底"],
    inputVisible: false,
    inputValue: "",
  },
  {
    id: 5,
    goods_name: "长袖T恤",
    goods_prices: 98,
    tags: ["圆领", "长袖"],
    inputVisible: false,
    inputValue: "",
  },
]);
const onRemove = (id) => {
  goodsList.value = goodsList.value.filter((item) => item.id !== id);
};
const vFocus = (el) => {
  el.focus();
};
const onInputConfig = (row) => {
  const val = row.inputValue;
  row.inputVisible = false;
  row.inputValue = "";
  if (!val || row.tags.indexOf(val) !== -1) {
    return;
  }
  row.tags.push(val);
};
</script>

<style scoped>
th {
  text-align: center;
}
td {
  line-height: 30px;
}
.ipt-tag {
  width: 80px;
  display: inline;
}
</style>
